<template>
  <div class="app-container calendar-list-container">
    <div class="yt-data-list" style="margin: -20px -20px 0 -20px;border: none;">
      <div class="yt-list-title"style="padding-left: 40px">
        <span>{{$t('myDailyManageLook.DailyDetails')}}</span>
      </div>
      <el-row style="margin-bottom:20px;color: #909399;padding: 20px 40px;border-bottom:1px solid #dadada">
        <el-col :span="5">
          <div style="padding-bottom: 10px">Date：</div>
          <div>{{ daily.dailyDate }}</div>
        </el-col>
        <el-col :span="5">
          <div style="padding-bottom: 10px">{{$t('myDailyManageLook.createName')}}</div>
          <div>{{ daily.createName }}</div>
        </el-col>
        <el-col :span="5">
          <div style="padding-bottom: 10px">{{$t('myDailyManageLook.createTime')}}</div>
          <div>{{ daily.createTime }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="data-list" style="position: relative">
      <div class="list-content" style="margin-bottom: 20px">
        <span>Daily Report</span>
      </div>
      <el-table :data="dailyReportList" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="300">
        <el-table-column type="index" align="center" :label="$t('myDailyManageLook.index')" width="60"/>
        <el-table-column align="center" label="Client" width="200" prop="customerName"/>
        <el-table-column align="center" label="*Type" prop="dailyReportType" width="60"/>
        <el-table-column align="center" label="* Project/Description" width="300">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="width:100px;word-wrap:break-word">{{ scope.row.description }}</div>
              <el-input v-if="scope.row.customerIs === '1'" type="textarea" autosize readonly v-model="scope.row.other"></el-input>              
            </div>
          </template>
        </el-table-column>           
        <el-table-column align="center" label="Action Item" prop="actionItem">
          <template slot-scope="scope">
            <el-input type="textarea" autosize readonly v-model="scope.row.actionItem"></el-input>
          </template>
        </el-table-column>                
        <el-table-column align="center" label="* Hrs" width="60" prop="hrs"/>
        <el-table-column align="center" label="Project Amount" width="120">
          <template slot-scope="scope">
            <div style="height: 23px" v-format="'#,##0'">{{ scope.row.projectAmount }}</div>
          </template>
        </el-table-column>        
      </el-table>
    </div>

    <div class="data-list" style="position: relative">
      <div class="list-content" style="margin-bottom: 20px;height: 48px;line-height: 48px">
        <span style="line-height: 45px">Plan activity</span>
      </div>
      <div class="block absolute">
        <span class="demonstration">Date</span>
        <el-date-picker v-model="daily.dailyPlanDate" type="date" readonly></el-date-picker>
      </div>
      <el-table :data="dailyReportPlanList" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="300">
        <el-table-column type="index" align="center" :label="$t('myDailyManageLook.index')" width="60"/>
        <el-table-column align="center" label="Client" width="200" prop="customerName"/>
        <el-table-column align="center" label="*Type" width="60" prop="dailyReportType"/>
        <el-table-column align="center" label="* Project/Description" width="300">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="width:100px;word-wrap:break-word">{{ scope.row.description }}</div>
              <el-input v-if="scope.row.customerIs === '1'" type="textarea" autosize readonly v-model="scope.row.other"></el-input>              
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="Action Item">
          <template slot-scope="scope">
            <el-input type="textarea" autosize readonly v-model="scope.row.actionItem"></el-input>
          </template>
        </el-table-column>            
        <el-table-column align="center" label="* Hrs" width="60" prop="hrs"/>
      </el-table>
    </div>

    <div class="data-list" style="position: relative">
      <div class="list-content" style="margin-bottom: 20px">
        <span>Tracking Item</span>
      </div>
      <el-table :data="preDailyReportList" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="300">
        <el-table-column type="index" align="center" :label="$t('myDailyManageLook.index')" width="60"/>
        <el-table-column align="center" label="Client" width="200" prop="customerName"/>
        <el-table-column align="center" label="Type" width="60" prop="dailyReportType"/>
        <el-table-column align="center" label="Project/Description" width="300">
          <template slot-scope="scope">
            <div style="display: flex;">
              <div style="width:100px;word-wrap:break-word">{{ scope.row.description }}</div>
              <el-input v-if="scope.row.customerIs === '1'" type="textarea" autosize readonly v-model="scope.row.other"></el-input>              
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="Action Item">
          <template slot-scope="scope">
            <el-input type="textarea" autosize readonly v-model="scope.row.actionItem"></el-input>
          </template>
        </el-table-column>           
      </el-table>
    </div>

    <div class="data-bnt">
      <el-button class="yt-btn-ys" type="primary" @click="backPage">{{$t('myDailyManageLook.getBack')}}</el-button>
    </div>
  </div>
</template>

<script>
  import { queryDetail } from '@/api/dailyAdministrator/myDaily';
  export default {
    name: 'myDailyDetails',
    components: { 'dict-select': () => import('@/components/Dict/dictValueSelect') },
    data() {
      return {
        daily: {},
        dailyReportTypeMap: this.$store.getters.allMapDic.dailyType,
        dailyReportList: [],
        dailyReportPlanList: [],
        preDailyReportList: []
      };
    },
    methods: {
      backPage() {
        const str = '/dailyManagement/myDailyManageLook'
        this.$store.getters.pageState[str] = {}
        const visitedViews = this.$store.state.tagsView.visitedViews

        visitedViews.forEach(view => {
          if (view.path === str) {
            this.$store.dispatch('delVisitedViews', view).then(views => {
              const latestView = views.slice(-1)[0]
              if (latestView) {
                console.log(latestView)
                this.$router.push(latestView)
              } else {
                this.$router.push('/')
              }
            })
          }
        })
      },
      getData() {
        if (this.id) {
          queryDetail({ id: this.id }).then(res => {
            this.daily = res.data.daily
            this.dailyReportList = res.data.dailyReportList
            this.dailyReportList.forEach(v => {
              v.dailyReportType = this.dailyReportTypeMap[v.dailyReportType]
            })

            this.dailyReportPlanList = res.data.dailyReportPlanList
            this.dailyReportPlanList.forEach(v => {
              v.dailyReportType = this.dailyReportTypeMap[v.dailyReportType]
            })

            this.preDailyReportList = res.data.preDailyReportList
            this.preDailyReportList.forEach(v => {
              v.dailyReportType = this.dailyReportTypeMap[v.dailyReportType]
            })
          })
        }
      }
    },
    mounted() {
      this.id = this.$route.query.id
      this.getData()
    }
  };
</script>
<style scoped lang="scss">
  .absolute {
    position: absolute;
    right: 20px;
    top: 7px
  }
</style>
